import React from 'react';
import 'antd/dist/antd.css';
import { Button } from 'antd';
import Guide, { useGuide } from '../index';

const Basic = () => {
    const { dispatch } = useGuide();
    const handleBtnClick = e => {
        e.stopPropagation(); // 这个一定要加, 要不然会触发遮罩层的点击事件
        dispatch({ type: 'start' });
    };
    const handleClearLocalStorage = () => {
        window.localStorage.removeItem('guide-component-test');
    };

    return (
        <>
            <Button type="primary" onClick={handleBtnClick}>
                测试
            </Button>
            &emsp;
            <Button onClick={handleClearLocalStorage}>清除 localStorage 记录</Button>
            <br />
            <br />
            <Guide.Step index={3} title="测试标题" content="index3" placement="topLeft">
                <p>step1</p>
            </Guide.Step>
            <p>test text</p>
            <Guide.Step index={2} content="index2">
                <p>step2</p>
            </Guide.Step>
            <Guide.Step index={1} content="index1">
                <p>step3</p>
            </Guide.Step>
            <p>test text</p>
            <p>test text</p>
            <p>test text</p>
            <p>test text</p>
            <p>test text</p>
            <p>test text</p>
            <p>test text</p>
            <p>test text</p>
            <Guide.Step content="index4">
                <p>step4</p>
            </Guide.Step>
            <p>test text</p>
        </>
    );
};

export default () => (
    <Guide autoStart showOnce overlay overlayClickNext localStorageKey="guide-component-test">
        <Basic />
    </Guide>
);
